<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .bname{
            text-decoration: none;
            color: black;
            font-size: medium;
            font-weight: bold;
        }
        .bname:hover{
            text-decoration: none;color: maroon;
        }
        .binfo{
            border:1px solid #CCCCCC; border-left: 0;border-right: 0;border-top: 0;margin: 10px 0;
        }
        #girl{
            background-color: #f7f1e3;
        }
        #rankingname{
            height: 50px;
            /*background: url("../../img/ranking.jpg");*/
            /*background-repeat: no-repeat;*/
        }
    </style>
</head>
<body>
<div id="girl" align="center">
    <input type="button" style="background-color: whitesmoke; width: 150px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn" th:onclick="toBoy()" value="男生榜">
    <input type="button" style="background-color: #f99e01; width: 150px;height: 40px;text-align: center;border: none;line-height: 20px;border-radius: 5px;" value="女生榜"><br><br>
    <div id="rankingname">
        <font style="font-size: xx-large;font-family: STXingkai;font-weight: bold;vert-align: middle">完结榜</font>
    </div>
    <span><a href="#" th:onclick="toOther()">其他榜单</a></span><br>
    <span><font color="#778899">本榜基于完结书籍点击量排名</font></span>
<table>
    <tr th:each="b:${pageInfo.list}">
        <td>
            <table class="binfo" style="height: 155px">
                <tr>
                    <td rowspan="5" width="130px" align="center" valign="top" th:background="'../../upload/'+${b.fileInfo.fUrl}" style="background-size: 110px 147px;background-repeat:no-repeat;">
                        <div th:if="${b.blRow==1}" th:text="${b.blRow}" style="font-size: large;font-weight: bold;color: orangered;text-align: left;"></div>
                        <div th:if="${b.blRow==2}" th:text="${b.blRow}" style="font-size: large;font-weight: bold;color: orange;text-align: left;"></div>
                        <div th:if="${b.blRow==3}" th:text="${b.blRow}" style="font-size: large;font-weight: bold;color: yellow;text-align: left;"></div>
                        <div th:if="${b.blRow!=1&&b.blRow!=2&&b.blRow!=3}" th:text="${b.blRow}" style="font-size: large;font-weight: bold;color: black;text-align: left;"></div>
                    </td>
                    <td>
                        <span>
                            <a class="bname" th:href="@{/book/showBookInfo(blId=${b.blId})}" th:target="_parent" th:text="${b.blName}"></a>
                        </span>
                    </td>
                    <td>
                        <span style="color: #f99e01" th:if="${b.avgScore!=null}" th:text="${b.avgScore.toString().substring(0,b.avgScore.toString().indexOf('.')+2)}+'分'"></span>
                        <span th:if="${b.avgScore==null}">暂无评分</span>
                    </td>
                </tr>
                <tr>
                    <td th:width="500px">
                        <span th:if="${b.sumCount!=null}" th:text="'作者：'+${b.author.AName}+'   |   类型：'+${b.type.TName}+'   |   字数：'+${b.sumCount}+'   |   点击量：'+${b.blCount}"></span>
                        <span th:if="${b.sumCount==null}" th:text="'作者：'+${b.author.AName}+'   |   类型：'+${b.type.TName}+'   |   字数：0   |   点击量：'+${b.blCount}"></span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <span th:if="${b.blInfo.length()>30}" th:text="${b.blInfo.substring(0,30)}+'......'"></span>
                        <span th:if="${b.blInfo.length()<=30}" th:text="${b.blInfo}"></span>
                    </td>
                    <td></td>
                </tr>
                <tr height="100px">
                    <td>
                        <span th:if="${b.lastTime!=null}" th:text="'更新日期  '+${b.lastTime}"></span>
                        <span th:if="${b.lastTime==null}">暂未更新</span>
                    </td>
                    <td>
                        <button th:if="${!b.flag}" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn" th:onclick="|addShelf(${b.blId})|">加入书架</button>
                        <button th:if="${b.flag}" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn" disabled>已在书架</button>
                        <input type="button" style="background-color: #f99e01; width: 100px;height: 40px;text-align: center;border: none;line-height: 20px;border-radius: 5px;" th:onclick="javascript:toRead([[${b.blId}]])" value="立即阅读">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<div th:include="common/page"></div>
</div>
</body>
<script>
    function toBoy() {
        $.ajax({
            url:"toBoyEnd",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#girl").html(data);
            },error:function () {
                alert("toboy失败");
            }
        })
    }
    function toOther() {
        $.ajax({
            url:"toRankingGirl",
            dataType:"html",
            type:"get",
            success:function (data) {
                $("#girl").html(data);
            },error:function () {
                alert("返回失败");
            }
        })
    }
    function toRead(blId) {
        parent.location.href="/book/queryChapterById?blId="+blId;
    }
    function toShelf(blId) {
        $.ajax({
            url:"/bookshelf/addShelf",
            type:"post",
            data:{"blId":blId},
            dataType:"text",
            success:function (data){
                if (data==1){//用户已登录，加入书架成功
                    location.reload();
                }else {//用户未登录，跳转到登录页面
                    location.href="/user/toLoginReader";
                }
            }
        })
    }
    function addShelf(blId) {
        $.ajax({
            url:"/bookshelf/addShelf",
            type:"post",
            data:{"blId":blId},
            dataType:"text",
            success:function (data){
                if (data==1){//用户已登录，加入书架成功
                    location.reload();
                }else {//用户未登录，跳转到登录页面
                    parent.location.href="/user/toLoginReader";
                }
            }
        })
    }
</script>
</html>